<div class="error-bar" *ngIf='errorMessage'>
  {{errorMessage}}
</div>
<div class="container">
  <div class="position-cell">
    <header class='section-header'>Position</header>
    <app-position></app-position>
  </div>
  <div class="depth-cell">
    <header class='section-header'>
      <div>Depth</div>
    </header>
    <app-depth></app-depth>
  </div>
  <div class="spread-cell">
    <header class='section-header'>Spread Analysis</header>
    <app-spread-analysis></app-spread-analysis>
  </div>
  <div class="active-pair-cell">
    <header class='section-header'>Open Pair</header>
    <app-active-pair></app-active-pair>
  </div>
  <div class="log-cell">
    <header class='section-header'>
      <div>Log</div>
      <div class="header-control">
        <label for="logAutoScrollCheckBox" class="pure-checkbox">
          <input #logAutoScrollCheckBox id="logAutoScrollCheckBox" type="checkbox" checked> auto scroll
        </label>
      </div>
    </header>
    <app-log-view [autoScroll]="logAutoScrollCheckBox.checked"></app-log-view>
  </div>
</div>